<template>
    <header>
        <!--头像-->
        <aside></aside>
        <!--用户名-->
        <p>{{username}}</p>
        <!--推出按钮-->
        <button @click="logout()">推出按钮</button>
    </header>
</template>

<script>
export default {
    name : 'HomeHeader',
    data(){
        //访问会话存储中的登录账号
        let loginuser = sessionStorage.getItem('islogin');

        return {
            username : loginuser,//在页面渲染前读取会话存储的数据并赋值
        }
    },
    methods : {
        logout(){
            //清除sessionstorage
            sessionStorage.clear();
            //跳转
            alert('已退出')
            this.$router.push('/login');
        }
    }
}
</script>

<style scoped>
header{
    width: 100%;
    height: 78px;
    background-color: #008b8b;
    display: flex;
    align-items: center;

}
header aside{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(206,206,206);
    margin-left: 50px;
}
header p{
    margin-left: 30px;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    font-weight: 800;
}
header button{
    border: none;
    background-color: unset;
    box-shadow: 0px 0px 6px;
    border-radius: 5px;
}
</style>